7.7 n-Puzzle Game

Motivations
- Let's develop the n-puzzle game using the TRU Board Games Playground library.
TRU Board Games Playground API
- Required libraries
```
<script src='https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js'></script>
<link rel='stylesheet' href='https://cs.tru.ca/~mlee/TRU Board Games Playground with JS/lib_tru_game_board.css'>
<script src='https://cs.tru.ca/~mlee/TRU Board Games Playground with JS/tru_game_board.lib.min.js'></script>
```
- Each cell has
  - marks - Mark, Mark2, Mark3
  - background color
  - content
  - position - row and col
- Board styles:
  - borderLine
  - noLine
  - centerLine
- TRUGameBoard(n, m, board_style, height, width, cbcolor) - object constructor
  - n × m board
  - board_style - string
  - height of the board - integer for px; minimum 400
  - width of the board - integer for px; minimum 400
  - cell background color - string
- Constants contained in the TRUGameBoard object
  - N - number of rows; board.N
  - M - number of columns
- Functions contained in the TRUGameBoard object
  - draw(id_container) - draw the board into the HTML container of id='id_container'; E.g., board.draw('board-area');
  - cellContent(row, col) - return the cell content
  - cellContent(row, col, content) - set cell content with the default font size
  - cellContent(row, col, content, font_size) - set cell content with a specific font size
  - cellsEventListener(event_name, handler) - register an event handler on all cells; E.g, click, mouseenter/mouseleave
  - cellEventListener(row, col, event_name, handler) - register an event handler on a cell pointed by row and col; E.g, click, mouseenter/mouseleave
  - position(event_object) - return a position object, {row: ..., col: ...}, for the cell on which the event was triggered.
  - cellBackgroundColor(row, col) - return the background color of the cell pointed by row and col
  - cellBackgroundColor(row, col, cbcolor) - set the background color of the cell
  - cellMark(row, col) - return the 1^st mark set in the cell, where mark is any value
  - cellMark(row, col, marker) - set a new 1^st mark in the cell
  - cellMark2(row, col) - return the 2^nd mark set in the cell, where mark is any value
  - cellMark2(row, col, marker) - set a new 2^nd mark in the cell
  - cellMark3(row, col) - return the 3^rd mark set in the cell, where mark is any value
  - cellMark3(row, col, marker) - set a new 3^rd mark in the cell
  - switchCells(row0, col0, row1, col1) - switch all data stored in the two cells

Trial 1: Let's try to create a 3x3 game board and display it. When you click a cell on the board, the color will be changed.
 ???? <button type='button' id="tr1-start">Click to create/display a game board</button><br> <div id='tr1-board'>A game board will be displayed here.</p> <script> var board $('#tr1-start').click(function() { // When the HTML element of id='tr1-start' is clicked, board = ??? ???(3, 3, 'borderLine', 400, 400, 'SkyBlue'); // Create an board object board.???('tr1-board'); // Draw the board into the HTML element of id='tr1-board' }); </script>
Trial 2: Let's write a function to shuffle an array, and test it.
<script> function shuffle(list, ntimes) { for (let i = 0; i < ntimes; i++) { let p = Math.floor(Math.random() * ????); // a random integer in [0, 8] let q = ???? ???? // switch list[p] and list[q] } } var list = [0, 1, 2, 3, 4, 5, 6, 7, 8]; shuffle(list, 100); alert(list); </script>
Trial 3: Let's write a function to display an array onto the game board (3 x 3), and test it. Note '0' should not be displayed.
<script> function displayList(list, board) { for (let row = 0; row < 3; row++) for (let col = 0; col < 3; col++) { if (list[????] != 0) board.cellContent(row, col, ????, 150); else { board.???(row, col, "", 150); board.cellBackgroundColor(row, col, 'White'); } } } displayList(list, board); // Look the board in Trial 1 </script>
Trial 4: Let's register the 'click' event listener over the cells on the board. Wirte a function if a cell is empty or not.
<script> function isEmptyCell(board, row, col) { if (????(row, col) == "" || board.cellContent(row, col) == undefined) return true; else return false; } alert(isEmptyCell(board, 0, 0)); </script>
Trial 5: Let's write a function that switches cells if the current cell is located beside the empty cell.
<script> function positionOfEmptyCell(board) { for (let row = 0; row < 3; row++) for (let col = 0; col < 3; col++) if (???? == "" || board.cellContent(row, col) == undefined) return ???row: ???, col: ???}; // return of object of row and col } board.????('click', function(eobj) { // event listeners on all cells let row = board.position(eobj).row; let col = board.????; if (!isEmptyCell(board, row, col)) { let row_emptycell = positionOfEmptyCell(board).row; let col_emptycell = positionOfEmptyCell(board).col; if (????) { // when the two cells are adjacent board.switchCells(row, col, row_emptycell, col_emptycell); } } }); </script>

Learning outcomes